<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>iconfont Demo</title>
    <link
      rel="shortcut icon"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
      type="image/x-icon"
    />
    <link
      rel="icon"
      type="image/svg+xml"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
    />
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"
    />
    <link rel="stylesheet" href="demo.css" />
    <link rel="stylesheet" href="iconfont.css" />
    <script src="iconfont.js"></script>
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
    <style>
      .main .logo {
        margin-top: 0;
        height: auto;
      }

      .main .logo a {
        display: flex;
        align-items: center;
      }

      .main .logo .sub-title {
        margin-left: 0.5em;
        font-size: 22px;
        color: #fff;
        background: linear-gradient(-45deg, #3967ff, #b500fe);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1 class="logo">
        <a
          href="https://www.iconfont.cn/"
          title="iconfont 首页"
          target="_blank"
        >
          <img
            width="200"
            src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
          />
        </a>
      </h1>
      <div class="nav-tabs">
        <ul id="tabs" class="dib-box">
          <li class="dib active"><span>Unicode</span></li>
          <li class="dib"><span>Font class</span></li>
          <li class="dib"><span>Symbol</span></li>
        </ul>

        <a
          href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4293801"
          target="_blank"
          class="nav-more"
          >查看项目</a
        >
      </div>
      <div class="tab-container">
        <div class="content unicode" style="display: block">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
              <div class="name">矩形</div>
              <div class="code-name">&amp;#xe613;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
              <div class="name">画多边形</div>
              <div class="code-name">&amp;#xe604;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
              <div class="name">格点订正</div>
              <div class="code-name">&amp;#xe6b7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
              <div class="name">水源涵养</div>
              <div class="code-name">&amp;#xe67b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
              <div class="name">土壤保持</div>
              <div class="code-name">&amp;#xe676;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
              <div class="name">生态服务</div>
              <div class="code-name">&amp;#xe70d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8b4;</span>
              <div class="name">49计算器、利率</div>
              <div class="code-name">&amp;#xe8b4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
              <div class="name">寒潮</div>
              <div class="code-name">&amp;#xe703;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
              <div class="name">高温</div>
              <div class="code-name">&amp;#xe70a;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
              <div class="name">干旱</div>
              <div class="code-name">&amp;#xe70b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
              <div class="name">大风</div>
              <div class="code-name">&amp;#xe70c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
              <div class="name">霜冻</div>
              <div class="code-name">&amp;#xe6fc;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
              <div class="name">暴雪</div>
              <div class="code-name">&amp;#xe6fd;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
              <div class="name">冰雹</div>
              <div class="code-name">&amp;#xe6ff;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
              <div class="name">结冰</div>
              <div class="code-name">&amp;#xe701;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
              <div class="name">浓雾</div>
              <div class="code-name">&amp;#xe702;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
              <div class="name">沙尘</div>
              <div class="code-name">&amp;#xe704;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
              <div class="name">暴雨</div>
              <div class="code-name">&amp;#xe705;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
              <div class="name">雷暴大风</div>
              <div class="code-name">&amp;#xe707;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xecad;</span>
              <div class="name">供水风险等级划分</div>
              <div class="code-name">&amp;#xecad;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
              <div class="name">供水风险区划</div>
              <div class="code-name">&amp;#xe611;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
              <div class="name">视频监控</div>
              <div class="code-name">&amp;#xe6fb;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
              <div class="name">停车场</div>
              <div class="code-name">&amp;#xe6fa;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
              <div class="name">作业实景</div>
              <div class="code-name">&amp;#xe6f9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
              <div class="name">服务产品</div>
              <div class="code-name">&amp;#xe610;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe931;</span>
              <div class="name">服务产品-产品制作</div>
              <div class="code-name">&amp;#xe931;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
              <div class="name">服务产品-图库管理</div>
              <div class="code-name">&amp;#xe648;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
              <div class="name">服务产品-地区管理</div>
              <div class="code-name">&amp;#xe616;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
              <div class="name">服务产品-分发管理</div>
              <div class="code-name">&amp;#xe661;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
              <div class="name">服务产品-算法管理</div>
              <div class="code-name">&amp;#xe61d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
              <div class="name">服务产品-素材管理</div>
              <div class="code-name">&amp;#xe60f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe962;</span>
              <div class="name">服务产品-绘图资料</div>
              <div class="code-name">&amp;#xe962;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
              <div class="name">服务产品-产品管理</div>
              <div class="code-name">&amp;#xe642;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
              <div class="name">服务产品-产品模版</div>
              <div class="code-name">&amp;#xe708;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea30;</span>
              <div class="name">土壤水分整点数据</div>
              <div class="code-name">&amp;#xea30;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
              <div class="name">土壤水分空间分布</div>
              <div class="code-name">&amp;#xe6f8;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
              <div class="name">应急指挥</div>
              <div class="code-name">&amp;#xe615;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
              <div class="name">水库</div>
              <div class="code-name">&amp;#xe6f2;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
              <div class="name">炮台</div>
              <div class="code-name">&amp;#xe6f3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
              <div class="name">粮库</div>
              <div class="code-name">&amp;#xe6f4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
              <div class="name">林场防火点</div>
              <div class="code-name">&amp;#xe6f5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
              <div class="name">应急负责人</div>
              <div class="code-name">&amp;#xe6f6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
              <div class="name">预警大喇叭</div>
              <div class="code-name">&amp;#xe6f7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
              <div class="name">工矿企业</div>
              <div class="code-name">&amp;#xe6f1;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
              <div class="name">集镇村寨</div>
              <div class="code-name">&amp;#xe6ee;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
              <div class="name">学校</div>
              <div class="code-name">&amp;#xe6ef;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
              <div class="name">加油站</div>
              <div class="code-name">&amp;#xe6f0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
              <div class="name">泥石流</div>
              <div class="code-name">&amp;#xe6e9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
              <div class="name">地面沉降</div>
              <div class="code-name">&amp;#xe6ea;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
              <div class="name">地裂缝</div>
              <div class="code-name">&amp;#xe6eb;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
              <div class="name">寒潮</div>
              <div class="code-name">&amp;#xe670;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
              <div class="name">苹果园</div>
              <div class="code-name">&amp;#xe693;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
              <div class="name">红枣园</div>
              <div class="code-name">&amp;#xe696;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
              <div class="name">农业园区</div>
              <div class="code-name">&amp;#xe698;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
              <div class="name">地质灾害预警</div>
              <div class="code-name">&amp;#xe685;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8eb;</span>
              <div class="name">灾害性天气预警</div>
              <div class="code-name">&amp;#xe8eb;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe871;</span>
              <div class="name">自动站阈值报警</div>
              <div class="code-name">&amp;#xe871;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
              <div class="name">服务描述</div>
              <div class="code-name">&amp;#xe6e8;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c9;</span>
              <div class="name">角色管理</div>
              <div class="code-name">&amp;#xe8c9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
              <div class="name">接口管理</div>
              <div class="code-name">&amp;#xe60d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
              <div class="name">系统帮助</div>
              <div class="code-name">&amp;#xe620;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe761;</span>
              <div class="name">返回示例</div>
              <div class="code-name">&amp;#xe761;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
              <div class="name">平台开放</div>
              <div class="code-name">&amp;#xe6e7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
              <div class="name">数据描述</div>
              <div class="code-name">&amp;#xe6ed;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xeac3;</span>
              <div class="name">24gf-fileEmpty</div>
              <div class="code-name">&amp;#xeac3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
              <div class="name">搜索</div>
              <div class="code-name">&amp;#xe622;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
              <div class="name">用户空间</div>
              <div class="code-name">&amp;#xe60e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xeb36;</span>
              <div class="name">服务与支持</div>
              <div class="code-name">&amp;#xeb36;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
              <div class="name">资源共享</div>
              <div class="code-name">&amp;#xe603;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8b9;</span>
              <div class="name">数据中台-首页</div>
              <div class="code-name">&amp;#xe8b9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xeac5;</span>
              <div class="name">24gf-folderOpen</div>
              <div class="code-name">&amp;#xeac5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
              <div class="name">接口设计</div>
              <div class="code-name">&amp;#xe612;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
              <div class="name">后台-大屏</div>
              <div class="code-name">&amp;#xe64b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
              <div class="name">大桥</div>
              <div class="code-name">&amp;#xe6e0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e1;</span>
              <div class="name">下坡</div>
              <div class="code-name">&amp;#xe6e1;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
              <div class="name">隧道</div>
              <div class="code-name">&amp;#xe6e2;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
              <div class="name">事故易发点</div>
              <div class="code-name">&amp;#xe6e3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
              <div class="name">急转弯</div>
              <div class="code-name">&amp;#xe6e4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e5;</span>
              <div class="name">横风区</div>
              <div class="code-name">&amp;#xe6e5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
              <div class="name">上坡</div>
              <div class="code-name">&amp;#xe6e6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
              <div class="name">大气-时间选择</div>
              <div class="code-name">&amp;#xe614;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
              <div class="name">气象服务</div>
              <div class="code-name">&amp;#xe636;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
              <div class="name">数据监测</div>
              <div class="code-name">&amp;#xe6a7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe841;</span>
              <div class="name">农业专题</div>
              <div class="code-name">&amp;#xe841;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe793;</span>
              <div class="name">农业</div>
              <div class="code-name">&amp;#xe793;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
              <div class="name">2</div>
              <div class="code-name">&amp;#xe6dd;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
              <div class="name">0</div>
              <div class="code-name">&amp;#xe6de;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
              <div class="name">4</div>
              <div class="code-name">&amp;#xe6df;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
              <div class="name">1</div>
              <div class="code-name">&amp;#xe6da;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
              <div class="name">3</div>
              <div class="code-name">&amp;#xe6dc;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
              <div class="name">站点大气质量</div>
              <div class="code-name">&amp;#xe697;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
              <div class="name">大气环境</div>
              <div class="code-name">&amp;#xe605;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
              <div class="name">大气环境-点击</div>
              <div class="code-name">&amp;#xe65a;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
              <div class="name">医院</div>
              <div class="code-name">&amp;#xe6d9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
              <div class="name">商超</div>
              <div class="code-name">&amp;#xe6d5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
              <div class="name">酒店</div>
              <div class="code-name">&amp;#xe6d6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
              <div class="name">服务区</div>
              <div class="code-name">&amp;#xe6d7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
              <div class="name">卫生间</div>
              <div class="code-name">&amp;#xe6d8;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
              <div class="name">雷电</div>
              <div class="code-name">&amp;#xe674;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
              <div class="name">高温</div>
              <div class="code-name">&amp;#xe675;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
              <div class="name">降水</div>
              <div class="code-name">&amp;#xe700;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
              <div class="name">风速</div>
              <div class="code-name">&amp;#xe706;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
              <div class="name">企业预警</div>
              <div class="code-name">&amp;#xe7b3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
              <div class="name">企业影响统计</div>
              <div class="code-name">&amp;#xe631;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
              <div class="name">企业历史</div>
              <div class="code-name">&amp;#xe695;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
              <div class="name">能源化工气象影响</div>
              <div class="code-name">&amp;#xe725;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
              <div class="name">科普信息</div>
              <div class="code-name">&amp;#xe601;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
              <div class="name">花粉健康影响</div>
              <div class="code-name">&amp;#xe602;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
              <div class="name">道路结冰</div>
              <div class="code-name">&amp;#xe673;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
              <div class="name">铁路</div>
              <div class="code-name">&amp;#xe6d4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
              <div class="name">干旱</div>
              <div class="code-name">&amp;#xe672;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
              <div class="name">低温报警</div>
              <div class="code-name">&amp;#xe608;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
              <div class="name">高温报警</div>
              <div class="code-name">&amp;#xe60c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
              <div class="name">道路-面</div>
              <div class="code-name">&amp;#xe635;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
              <div class="name">大风</div>
              <div class="code-name">&amp;#xe6ec;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c7;</span>
              <div class="name">眼睛</div>
              <div class="code-name">&amp;#xe8c7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c6;</span>
              <div class="name">217时间</div>
              <div class="code-name">&amp;#xe8c6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
              <div class="name">注意</div>
              <div class="code-name">&amp;#xe634;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c4;</span>
              <div class="name">定位</div>
              <div class="code-name">&amp;#xe8c4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
              <div class="name">earth</div>
              <div class="code-name">&amp;#xe6aa;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
              <div class="name">3</div>
              <div class="code-name">&amp;#xe6ab;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
              <div class="name">5</div>
              <div class="code-name">&amp;#xe6ad;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
              <div class="name">4</div>
              <div class="code-name">&amp;#xe6ae;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
              <div class="name">2</div>
              <div class="code-name">&amp;#xe6b0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
              <div class="name">综合监测</div>
              <div class="code-name">&amp;#xe66f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
              <div class="name">景点统计</div>
              <div class="code-name">&amp;#xe69f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
              <div class="name">景区天气</div>
              <div class="code-name">&amp;#xe61f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
              <div class="name">景区</div>
              <div class="code-name">&amp;#xe6d3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
              <div class="name">植被覆盖率</div>
              <div class="code-name">&amp;#xe62b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
              <div class="name">历史火点</div>
              <div class="code-name">&amp;#xe655;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
              <div class="name">林区火点监测</div>
              <div class="code-name">&amp;#xe633;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
              <div class="name">林</div>
              <div class="code-name">&amp;#xe6d2;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
              <div class="name">风向</div>
              <div class="code-name">&amp;#xe6d1;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
              <div class="name">湿度</div>
              <div class="code-name">&amp;#xe61a;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
              <div class="name">温度 (1)</div>
              <div class="code-name">&amp;#xe671;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xecac;</span>
              <div class="name">降水</div>
              <div class="code-name">&amp;#xecac;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
              <div class="name">火点实时监测/地图火点</div>
              <div class="code-name">&amp;#xe645;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
              <div class="name">点</div>
              <div class="code-name">&amp;#xe6d0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
              <div class="name">历史预警统计</div>
              <div class="code-name">&amp;#xe728;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
              <div class="name">预警结果检验评估</div>
              <div class="code-name">&amp;#xe626;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
              <div class="name">预警信号二级标题</div>
              <div class="code-name">&amp;#xe609;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
              <div class="name">预警列表</div>
              <div class="code-name">&amp;#xe6fe;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
              <div class="name">预警信号右上列表</div>
              <div class="code-name">&amp;#xe61c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
              <div class="name">模式对比</div>
              <div class="code-name">&amp;#xe600;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c5;</span>
              <div class="name">预报时间</div>
              <div class="code-name">&amp;#xe8c5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xeadd;</span>
              <div class="name">数值预报</div>
              <div class="code-name">&amp;#xeadd;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
              <div class="name">网格预报</div>
              <div class="code-name">&amp;#xe63b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
              <div class="name">模式结果检验评估</div>
              <div class="code-name">&amp;#xe60b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xec7e;</span>
              <div class="name">模式选择</div>
              <div class="code-name">&amp;#xec7e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
              <div class="name">站点统计分析</div>
              <div class="code-name">&amp;#xe660;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
              <div class="name">格点实况监测</div>
              <div class="code-name">&amp;#xe61e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
              <div class="name">用户-角色-用户名-单人_jurassic</div>
              <div class="code-name">&amp;#xe6a6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8d4;</span>
              <div class="name">242锁定</div>
              <div class="code-name">&amp;#xe8d4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
              <div class="name">大气1</div>
              <div class="code-name">&amp;#xe6cf;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
              <div class="name">大气</div>
              <div class="code-name">&amp;#xe6ce;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
              <div class="name">正闪</div>
              <div class="code-name">&amp;#xe6cc;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
              <div class="name">负闪</div>
              <div class="code-name">&amp;#xe6cd;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
              <div class="name">大气电场仪</div>
              <div class="code-name">&amp;#xe6cb;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
              <div class="name">微波辐射计</div>
              <div class="code-name">&amp;#xe6ca;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c9;</span>
              <div class="name">风廓线雷达</div>
              <div class="code-name">&amp;#xe6c9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
              <div class="name">运输</div>
              <div class="code-name">&amp;#xe6bf;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c1;</span>
              <div class="name">崩塌</div>
              <div class="code-name">&amp;#xe6c1;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c2;</span>
              <div class="name">新能源</div>
              <div class="code-name">&amp;#xe6c2;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c3;</span>
              <div class="name">化工</div>
              <div class="code-name">&amp;#xe6c3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
              <div class="name">地面塌陷</div>
              <div class="code-name">&amp;#xe6c4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
              <div class="name">煤炭</div>
              <div class="code-name">&amp;#xe6c5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
              <div class="name">热电</div>
              <div class="code-name">&amp;#xe6c6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
              <div class="name">滑坡</div>
              <div class="code-name">&amp;#xe6c7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
              <div class="name">内涝</div>
              <div class="code-name">&amp;#xe6c8;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
              <div class="name">雷达</div>
              <div class="code-name">&amp;#xe6c0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
              <div class="name">下拉（小）_32</div>
              <div class="code-name">&amp;#xe694;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
              <div class="name">返回_32</div>
              <div class="code-name">&amp;#xe68c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
              <div class="name">更多_32</div>
              <div class="code-name">&amp;#xe68d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
              <div class="name">播放器-播放_44</div>
              <div class="code-name">&amp;#xe6a4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
              <div class="name">播放器-暂停_44</div>
              <div class="code-name">&amp;#xe6a5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8cf;</span>
              <div class="name">234日历</div>
              <div class="code-name">&amp;#xe8cf;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
              <div class="name">交通</div>
              <div class="code-name">&amp;#xe6b9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
              <div class="name">旅游</div>
              <div class="code-name">&amp;#xe6ba;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
              <div class="name">内涝</div>
              <div class="code-name">&amp;#xe6bb;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6bc;</span>
              <div class="name">健康</div>
              <div class="code-name">&amp;#xe6bc;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
              <div class="name">服务</div>
              <div class="code-name">&amp;#xe6bd;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
              <div class="name">能化</div>
              <div class="code-name">&amp;#xe6be;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
              <div class="name">网格</div>
              <div class="code-name">&amp;#xe6db;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe7eb;</span>
              <div class="name">探空资料</div>
              <div class="code-name">&amp;#xe7eb;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
              <div class="name">站点实况监测</div>
              <div class="code-name">&amp;#xe710;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
              <div class="name">天气雷达</div>
              <div class="code-name">&amp;#xe607;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
              <div class="name">表-表格_jurassic</div>
              <div class="code-name">&amp;#xe6ac;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c8;</span>
              <div class="name">224用户</div>
              <div class="code-name">&amp;#xe8c8;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
              <div class="name">林业</div>
              <div class="code-name">&amp;#xe692;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
              <div class="name">图层</div>
              <div class="code-name">&amp;#xe709;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
              <div class="name">预警</div>
              <div class="code-name">&amp;#xe663;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
              <div class="name">plane</div>
              <div class="code-name">&amp;#xe606;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
              <div class="name">地球</div>
              <div class="code-name">&amp;#xe60a;</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="unicode-">Unicode 引用</h2>
            <hr />

            <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
            <ul>
              <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
              <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
            </ul>
            <blockquote>
              <p>
                注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
                引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
              </p>
            </blockquote>
            <p>Unicode 使用步骤如下：</p>
            <h3 id="-font-face">
              第一步：拷贝项目下面生成的 <code>@font-face</code>
            </h3>
            <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1706402197452') format('woff2'),
       url('iconfont.woff?t=1706402197452') format('woff'),
       url('iconfont.ttf?t=1706402197452') format('truetype');
}
</code></pre>
            <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
            <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
            <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
            <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
            <blockquote>
              <p>
                "iconfont" 是你项目下的
                font-family。可以通过编辑项目查看，默认是 "iconfont"。
              </p>
            </blockquote>
          </div>
        </div>
        <div class="content font-class">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <span class="icon iconfont icon-juxing"></span>
              <div class="name">矩形</div>
              <div class="code-name">.icon-juxing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-huaduobianxing"></span>
              <div class="name">画多边形</div>
              <div class="code-name">.icon-huaduobianxing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dingzheng"></span>
              <div class="name">格点订正</div>
              <div class="code-name">.icon-dingzheng</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shuiyuanhanyang"></span>
              <div class="name">水源涵养</div>
              <div class="code-name">.icon-shuiyuanhanyang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-turangbaochiliang"></span>
              <div class="name">土壤保持</div>
              <div class="code-name">.icon-turangbaochiliang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shengtaifuwu"></span>
              <div class="name">生态服务</div>
              <div class="code-name">.icon-shengtaifuwu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jisuanqilishuai"></span>
              <div class="name">49计算器、利率</div>
              <div class="code-name">.icon-jisuanqilishuai</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-hanchao1"></span>
              <div class="name">寒潮</div>
              <div class="code-name">.icon-hanchao1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gaowen1"></span>
              <div class="name">高温</div>
              <div class="code-name">.icon-gaowen1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-ganhan1"></span>
              <div class="name">干旱</div>
              <div class="code-name">.icon-ganhan1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dafeng"></span>
              <div class="name">大风</div>
              <div class="code-name">.icon-dafeng</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shuangdong"></span>
              <div class="name">霜冻</div>
              <div class="code-name">.icon-shuangdong</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-baoxue"></span>
              <div class="name">暴雪</div>
              <div class="code-name">.icon-baoxue</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-bingbao"></span>
              <div class="name">冰雹</div>
              <div class="code-name">.icon-bingbao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jiebing"></span>
              <div class="name">结冰</div>
              <div class="code-name">.icon-jiebing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-nongwu"></span>
              <div class="name">浓雾</div>
              <div class="code-name">.icon-nongwu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shachen"></span>
              <div class="name">沙尘</div>
              <div class="code-name">.icon-shachen</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-baoyu"></span>
              <div class="name">暴雨</div>
              <div class="code-name">.icon-baoyu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-leibaodafeng"></span>
              <div class="name">雷暴大风</div>
              <div class="code-name">.icon-leibaodafeng</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dengji-copy"></span>
              <div class="name">供水风险等级划分</div>
              <div class="code-name">.icon-dengji-copy</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shui"></span>
              <div class="name">供水风险区划</div>
              <div class="code-name">.icon-shui</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jiankong3"></span>
              <div class="name">视频监控</div>
              <div class="code-name">.icon-jiankong3</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tingchechang"></span>
              <div class="name">停车场</div>
              <div class="code-name">.icon-tingchechang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zuoyeshijing"></span>
              <div class="name">作业实景</div>
              <div class="code-name">.icon-zuoyeshijing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-wenjian"></span>
              <div class="name">服务产品</div>
              <div class="code-name">.icon-wenjian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-print-full"></span>
              <div class="name">服务产品-产品制作</div>
              <div class="code-name">.icon-print-full</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-menu_tkgl"></span>
              <div class="name">服务产品-图库管理</div>
              <div class="code-name">.icon-menu_tkgl</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-weizhiwendang"></span>
              <div class="name">服务产品-地区管理</div>
              <div class="code-name">.icon-weizhiwendang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yishenpi"></span>
              <div class="name">服务产品-分发管理</div>
              <div class="code-name">.icon-yishenpi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-suanfayanshi_mianxing"></span>
              <div class="name">服务产品-算法管理</div>
              <div class="code-name">.icon-suanfayanshi_mianxing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-sucaiguanli"></span>
              <div class="name">服务产品-素材管理</div>
              <div class="code-name">.icon-sucaiguanli</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-painting4"></span>
              <div class="name">服务产品-绘图资料</div>
              <div class="code-name">.icon-a-painting4</div>
            </li>

            <li class="dib">
              <span
                class="icon iconfont icon-yingxiaoguanli-dingdanguanli"
              ></span>
              <div class="name">服务产品-产品管理</div>
              <div class="code-name">.icon-yingxiaoguanli-dingdanguanli</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-moban"></span>
              <div class="name">服务产品-产品模版</div>
              <div class="code-name">.icon-moban</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-turangshuifen"></span>
              <div class="name">土壤水分整点数据</div>
              <div class="code-name">.icon-turangshuifen</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-turangshidu"></span>
              <div class="name">土壤水分空间分布</div>
              <div class="code-name">.icon-turangshidu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zhihuizhongxin"></span>
              <div class="name">应急指挥</div>
              <div class="code-name">.icon-zhihuizhongxin</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shuiku"></span>
              <div class="name">水库</div>
              <div class="code-name">.icon-shuiku</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-paotai"></span>
              <div class="name">炮台</div>
              <div class="code-name">.icon-paotai</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-liangku"></span>
              <div class="name">粮库</div>
              <div class="code-name">.icon-liangku</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-linchangfanghuodian"></span>
              <div class="name">林场防火点</div>
              <div class="code-name">.icon-linchangfanghuodian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yingjifuzeren"></span>
              <div class="name">应急负责人</div>
              <div class="code-name">.icon-yingjifuzeren</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yujingdalaba"></span>
              <div class="name">预警大喇叭</div>
              <div class="code-name">.icon-yujingdalaba</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gongkuangqiye"></span>
              <div class="name">工矿企业</div>
              <div class="code-name">.icon-gongkuangqiye</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jizhencunzhai"></span>
              <div class="name">集镇村寨</div>
              <div class="code-name">.icon-jizhencunzhai</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xuexiao"></span>
              <div class="name">学校</div>
              <div class="code-name">.icon-xuexiao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jiayouzhan"></span>
              <div class="name">加油站</div>
              <div class="code-name">.icon-jiayouzhan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-nishiliu"></span>
              <div class="name">泥石流</div>
              <div class="code-name">.icon-nishiliu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dimianchenjiang"></span>
              <div class="name">地面沉降</div>
              <div class="code-name">.icon-dimianchenjiang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-diliefeng"></span>
              <div class="name">地裂缝</div>
              <div class="code-name">.icon-diliefeng</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-hanchao"></span>
              <div class="name">寒潮</div>
              <div class="code-name">.icon-hanchao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-mianxingguoshu"></span>
              <div class="name">苹果园</div>
              <div class="code-name">.icon-mianxingguoshu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zao"></span>
              <div class="name">红枣园</div>
              <div class="code-name">.icon-zao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-mianxingyangshu"></span>
              <div class="name">农业园区</div>
              <div class="code-name">.icon-mianxingyangshu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dizhizaihaiyinhuandian"></span>
              <div class="name">地质灾害预警</div>
              <div class="code-name">.icon-dizhizaihaiyinhuandian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gantanhao-sanjiaokuang"></span>
              <div class="name">灾害性天气预警</div>
              <div class="code-name">.icon-gantanhao-sanjiaokuang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-alarm-full"></span>
              <div class="name">自动站阈值报警</div>
              <div class="code-name">.icon-alarm-full</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuwumiaoshu"></span>
              <div class="name">服务描述</div>
              <div class="code-name">.icon-fuwumiaoshu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jiaosequnti"></span>
              <div class="name">角色管理</div>
              <div class="code-name">.icon-jiaosequnti</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shujujiekou"></span>
              <div class="name">接口管理</div>
              <div class="code-name">.icon-shujujiekou</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-bangzhu"></span>
              <div class="name">系统帮助</div>
              <div class="code-name">.icon-bangzhu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-daima"></span>
              <div class="name">返回示例</div>
              <div class="code-name">.icon-daima</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-pingtaikaifang"></span>
              <div class="name">平台开放</div>
              <div class="code-name">.icon-pingtaikaifang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-miaoshu"></span>
              <div class="name">数据描述</div>
              <div class="code-name">.icon-miaoshu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-24gf-fileEmpty"></span>
              <div class="name">24gf-fileEmpty</div>
              <div class="code-name">.icon-24gf-fileEmpty</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-sousuo"></span>
              <div class="name">搜索</div>
              <div class="code-name">.icon-sousuo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-project_space"></span>
              <div class="name">用户空间</div>
              <div class="code-name">.icon-project_space</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuwu1"></span>
              <div class="name">服务与支持</div>
              <div class="code-name">.icon-fuwu1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shuzhuangtu"></span>
              <div class="name">资源共享</div>
              <div class="code-name">.icon-shuzhuangtu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shouye"></span>
              <div class="name">数据中台-首页</div>
              <div class="code-name">.icon-shouye</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-24gf-folderOpen"></span>
              <div class="name">24gf-folderOpen</div>
              <div class="code-name">.icon-24gf-folderOpen</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jiekousheji"></span>
              <div class="name">接口设计</div>
              <div class="code-name">.icon-jiekousheji</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-navicon-dphf"></span>
              <div class="name">后台-大屏</div>
              <div class="code-name">.icon-navicon-dphf</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-daqiao"></span>
              <div class="name">大桥</div>
              <div class="code-name">.icon-daqiao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiapo"></span>
              <div class="name">下坡</div>
              <div class="code-name">.icon-xiapo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-suidao"></span>
              <div class="name">隧道</div>
              <div class="code-name">.icon-suidao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shiguyifadian"></span>
              <div class="name">事故易发点</div>
              <div class="code-name">.icon-shiguyifadian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jizhuanwan"></span>
              <div class="name">急转弯</div>
              <div class="code-name">.icon-jizhuanwan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-hengfengqu"></span>
              <div class="name">横风区</div>
              <div class="code-name">.icon-hengfengqu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shangpo"></span>
              <div class="name">上坡</div>
              <div class="code-name">.icon-shangpo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shijian2"></span>
              <div class="name">大气-时间选择</div>
              <div class="code-name">.icon-shijian2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shujuchaxun"></span>
              <div class="name">气象服务</div>
              <div class="code-name">.icon-shujuchaxun</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shujujiance"></span>
              <div class="name">数据监测</div>
              <div class="code-name">.icon-shujujiance</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tanpaiguanli"></span>
              <div class="name">农业专题</div>
              <div class="code-name">.icon-tanpaiguanli</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-ziyuan609"></span>
              <div class="name">农业</div>
              <div class="code-name">.icon-a-ziyuan609</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-2"></span>
              <div class="name">2</div>
              <div class="code-name">.icon-a-2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-0"></span>
              <div class="name">0</div>
              <div class="code-name">.icon-a-0</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-41"></span>
              <div class="name">4</div>
              <div class="code-name">.icon-a-41</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-1"></span>
              <div class="name">1</div>
              <div class="code-name">.icon-a-1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-31"></span>
              <div class="name">3</div>
              <div class="code-name">.icon-a-31</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-kongqiqingxin"></span>
              <div class="name">站点大气质量</div>
              <div class="code-name">.icon-kongqiqingxin</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-icondaqi"></span>
              <div class="name">大气环境</div>
              <div class="code-name">.icon-a-icondaqi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dianji"></span>
              <div class="name">大气环境-点击</div>
              <div class="code-name">.icon-dianji</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yiyuan"></span>
              <div class="name">医院</div>
              <div class="code-name">.icon-yiyuan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-Group427319262"></span>
              <div class="name">商超</div>
              <div class="code-name">.icon-a-Group427319262</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jiudian"></span>
              <div class="name">酒店</div>
              <div class="code-name">.icon-jiudian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuwuqu"></span>
              <div class="name">服务区</div>
              <div class="code-name">.icon-fuwuqu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-Group50871"></span>
              <div class="name">卫生间</div>
              <div class="code-name">.icon-a-Group50871</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-leidian"></span>
              <div class="name">雷电</div>
              <div class="code-name">.icon-leidian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gaowen"></span>
              <div class="name">高温</div>
              <div class="code-name">.icon-gaowen</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jiangshui1"></span>
              <div class="name">降水</div>
              <div class="code-name">.icon-jiangshui1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fengsu"></span>
              <div class="name">风速</div>
              <div class="code-name">.icon-fengsu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jianceyujing_1"></span>
              <div class="name">企业预警</div>
              <div class="code-name">.icon-jianceyujing_1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tongji2"></span>
              <div class="name">企业影响统计</div>
              <div class="code-name">.icon-tongji2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jurassic_wait"></span>
              <div class="name">企业历史</div>
              <div class="code-name">.icon-jurassic_wait</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-qiye2"></span>
              <div class="name">能源化工气象影响</div>
              <div class="code-name">.icon-qiye2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tushu"></span>
              <div class="name">科普信息</div>
              <div class="code-name">.icon-tushu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-weiju"></span>
              <div class="name">花粉健康影响</div>
              <div class="code-name">.icon-weiju</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-daolujiebing"></span>
              <div class="name">道路结冰</div>
              <div class="code-name">.icon-daolujiebing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-Group1923"></span>
              <div class="name">铁路</div>
              <div class="code-name">.icon-a-Group1923</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-ganhan"></span>
              <div class="name">干旱</div>
              <div class="code-name">.icon-ganhan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-diwenbaojing"></span>
              <div class="name">低温报警</div>
              <div class="code-name">.icon-diwenbaojing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gaowenbaojing"></span>
              <div class="name">高温报警</div>
              <div class="code-name">.icon-gaowenbaojing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-daolu-mian"></span>
              <div class="name">道路-面</div>
              <div class="code-name">.icon-daolu-mian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dafeng1"></span>
              <div class="name">大风</div>
              <div class="code-name">.icon-dafeng1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yanjing"></span>
              <div class="name">眼睛</div>
              <div class="code-name">.icon-yanjing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shijian1"></span>
              <div class="name">217时间</div>
              <div class="code-name">.icon-shijian1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zhuyi"></span>
              <div class="name">注意</div>
              <div class="code-name">.icon-zhuyi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dingwei"></span>
              <div class="name">定位</div>
              <div class="code-name">.icon-dingwei</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-earth"></span>
              <div class="name">earth</div>
              <div class="code-name">.icon-earth</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-3"></span>
              <div class="name">3</div>
              <div class="code-name">.icon-a-3</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-5"></span>
              <div class="name">5</div>
              <div class="code-name">.icon-a-5</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-4"></span>
              <div class="name">4</div>
              <div class="code-name">.icon-a-4</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-21"></span>
              <div class="name">2</div>
              <div class="code-name">.icon-a-21</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-huanjingjiance"></span>
              <div class="name">综合监测</div>
              <div class="code-name">.icon-huanjingjiance</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tongji1"></span>
              <div class="name">景点统计</div>
              <div class="code-name">.icon-tongji1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jingqu"></span>
              <div class="name">景区天气</div>
              <div class="code-name">.icon-jingqu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-Group5088"></span>
              <div class="name">景区</div>
              <div class="code-name">.icon-a-Group5088</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shumu"></span>
              <div class="name">植被覆盖率</div>
              <div class="code-name">.icon-shumu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jishireduchaxun"></span>
              <div class="name">历史火点</div>
              <div class="code-name">.icon-jishireduchaxun</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fanghuodianguanli"></span>
              <div class="name">林区火点监测</div>
              <div class="code-name">.icon-fanghuodianguanli</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-lin"></span>
              <div class="name">林</div>
              <div class="code-name">.icon-lin</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fengxiang"></span>
              <div class="name">风向</div>
              <div class="code-name">.icon-fengxiang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-IOTtubiao_huabanfuben"></span>
              <div class="name">湿度</div>
              <div class="code-name">.icon-IOTtubiao_huabanfuben</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-wendu"></span>
              <div class="name">温度 (1)</div>
              <div class="code-name">.icon-wendu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jiangshui"></span>
              <div class="name">降水</div>
              <div class="code-name">.icon-jiangshui</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-remen2"></span>
              <div class="name">火点实时监测/地图火点</div>
              <div class="code-name">.icon-remen2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dian"></span>
              <div class="name">点</div>
              <div class="code-name">.icon-dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tongji"></span>
              <div class="name">历史预警统计</div>
              <div class="code-name">.icon-tongji</div>
            </li>

            <li class="dib">
              <span
                class="icon iconfont icon-c_safety_analysis_early_warning"
              ></span>
              <div class="name">预警结果检验评估</div>
              <div class="code-name">.icon-c_safety_analysis_early_warning</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yujing3"></span>
              <div class="name">预警信号二级标题</div>
              <div class="code-name">.icon-yujing3</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yujing1"></span>
              <div class="name">预警列表</div>
              <div class="code-name">.icon-yujing1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yujing2"></span>
              <div class="name">预警信号右上列表</div>
              <div class="code-name">.icon-yujing2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-duibifenxi"></span>
              <div class="name">模式对比</div>
              <div class="code-name">.icon-duibifenxi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shijian"></span>
              <div class="name">预报时间</div>
              <div class="code-name">.icon-shijian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-liangliangduibi"></span>
              <div class="name">数值预报</div>
              <div class="code-name">.icon-liangliangduibi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-wangge"></span>
              <div class="name">网格预报</div>
              <div class="code-name">.icon-wangge</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xuekeyoushipinggu"></span>
              <div class="name">模式结果检验评估</div>
              <div class="code-name">.icon-xuekeyoushipinggu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-qiapianmoshi_kuai"></span>
              <div class="name">模式选择</div>
              <div class="code-name">.icon-qiapianmoshi_kuai</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-biaoge"></span>
              <div class="name">站点统计分析</div>
              <div class="code-name">.icon-biaoge</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-wanggexian"></span>
              <div class="name">格点实况监测</div>
              <div class="code-name">.icon-wanggexian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jurassic_user"></span>
              <div class="name">用户-角色-用户名-单人_jurassic</div>
              <div class="code-name">.icon-jurassic_user</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-suoding"></span>
              <div class="name">242锁定</div>
              <div class="code-name">.icon-suoding</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-daqi1"></span>
              <div class="name">大气1</div>
              <div class="code-name">.icon-daqi1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-daqi"></span>
              <div class="name">大气</div>
              <div class="code-name">.icon-daqi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zhengshan"></span>
              <div class="name">正闪</div>
              <div class="code-name">.icon-zhengshan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fushan"></span>
              <div class="name">负闪</div>
              <div class="code-name">.icon-fushan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-daqidianchangyi"></span>
              <div class="name">大气电场仪</div>
              <div class="code-name">.icon-daqidianchangyi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-weibofusheji"></span>
              <div class="name">微波辐射计</div>
              <div class="code-name">.icon-weibofusheji</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fengkuoxianleida"></span>
              <div class="name">风廓线雷达</div>
              <div class="code-name">.icon-fengkuoxianleida</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-Group427319210"></span>
              <div class="name">运输</div>
              <div class="code-name">.icon-a-Group427319210</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-bengta"></span>
              <div class="name">崩塌</div>
              <div class="code-name">.icon-bengta</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-Group427319209"></span>
              <div class="name">新能源</div>
              <div class="code-name">.icon-a-Group427319209</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-Group5087"></span>
              <div class="name">化工</div>
              <div class="code-name">.icon-a-Group5087</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dimiantaxian"></span>
              <div class="name">地面塌陷</div>
              <div class="code-name">.icon-dimiantaxian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-Group427319208"></span>
              <div class="name">煤炭</div>
              <div class="code-name">.icon-a-Group427319208</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-Group427319207"></span>
              <div class="name">热电</div>
              <div class="code-name">.icon-a-Group427319207</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-huapo"></span>
              <div class="name">滑坡</div>
              <div class="code-name">.icon-huapo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-Frame3"></span>
              <div class="name">内涝</div>
              <div class="code-name">.icon-Frame3</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-Vector"></span>
              <div class="name">雷达</div>
              <div class="code-name">.icon-Vector</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xialaxiao"></span>
              <div class="name">下拉（小）_32</div>
              <div class="code-name">.icon-xialaxiao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fanhui"></span>
              <div class="name">返回_32</div>
              <div class="code-name">.icon-fanhui</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gengduo"></span>
              <div class="name">更多_32</div>
              <div class="code-name">.icon-gengduo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-bofangqi-bofang"></span>
              <div class="name">播放器-播放_44</div>
              <div class="code-name">.icon-bofangqi-bofang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-bofangqi-zanting"></span>
              <div class="name">播放器-暂停_44</div>
              <div class="code-name">.icon-bofangqi-zanting</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-rili"></span>
              <div class="name">234日历</div>
              <div class="code-name">.icon-rili</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-Frame"></span>
              <div class="name">交通</div>
              <div class="code-name">.icon-Frame</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-Frame1"></span>
              <div class="name">旅游</div>
              <div class="code-name">.icon-Frame1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-Frame2"></span>
              <div class="name">内涝</div>
              <div class="code-name">.icon-Frame2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jiankang"></span>
              <div class="name">健康</div>
              <div class="code-name">.icon-jiankang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuwu"></span>
              <div class="name">服务</div>
              <div class="code-name">.icon-fuwu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-nenghua"></span>
              <div class="name">能化</div>
              <div class="code-name">.icon-nenghua</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-list"></span>
              <div class="name">网格</div>
              <div class="code-name">.icon-list</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-qita"></span>
              <div class="name">探空资料</div>
              <div class="code-name">.icon-qita</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tianqi"></span>
              <div class="name">站点实况监测</div>
              <div class="code-name">.icon-tianqi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tianqileida"></span>
              <div class="name">天气雷达</div>
              <div class="code-name">.icon-tianqileida</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jurassic_table"></span>
              <div class="name">表-表格_jurassic</div>
              <div class="code-name">.icon-jurassic_table</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yonghu"></span>
              <div class="name">224用户</div>
              <div class="code-name">.icon-yonghu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-linye"></span>
              <div class="name">林业</div>
              <div class="code-name">.icon-linye</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tuceng"></span>
              <div class="name">图层</div>
              <div class="code-name">.icon-tuceng</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yujing"></span>
              <div class="name">预警</div>
              <div class="code-name">.icon-yujing</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-7"></span>
              <div class="name">plane</div>
              <div class="code-name">.icon-7</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-diqiu"></span>
              <div class="name">地球</div>
              <div class="code-name">.icon-diqiu</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="font-class-">font-class 引用</h2>
            <hr />

            <p>
              font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
              书写不直观，语意不明确的问题。
            </p>
            <p>与 Unicode 使用方式相比，具有如下特点：</p>
            <ul>
              <li>
                相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon
                是什么。
              </li>
              <li>
                因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
                里面的 Unicode 引用。
              </li>
            </ul>
            <p>使用步骤如下：</p>
            <h3 id="-fontclass-">
              第一步：引入项目下面生成的 fontclass 代码：
            </h3>
            <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
            <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
            <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
            <blockquote>
              <p>
                " iconfont" 是你项目下的
                font-family。可以通过编辑项目查看，默认是 "iconfont"。
              </p>
            </blockquote>
          </div>
        </div>
        <div class="content symbol">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-juxing"></use>
              </svg>
              <div class="name">矩形</div>
              <div class="code-name">#icon-juxing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-huaduobianxing"></use>
              </svg>
              <div class="name">画多边形</div>
              <div class="code-name">#icon-huaduobianxing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dingzheng"></use>
              </svg>
              <div class="name">格点订正</div>
              <div class="code-name">#icon-dingzheng</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shuiyuanhanyang"></use>
              </svg>
              <div class="name">水源涵养</div>
              <div class="code-name">#icon-shuiyuanhanyang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-turangbaochiliang"></use>
              </svg>
              <div class="name">土壤保持</div>
              <div class="code-name">#icon-turangbaochiliang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shengtaifuwu"></use>
              </svg>
              <div class="name">生态服务</div>
              <div class="code-name">#icon-shengtaifuwu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jisuanqilishuai"></use>
              </svg>
              <div class="name">49计算器、利率</div>
              <div class="code-name">#icon-jisuanqilishuai</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-hanchao1"></use>
              </svg>
              <div class="name">寒潮</div>
              <div class="code-name">#icon-hanchao1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gaowen1"></use>
              </svg>
              <div class="name">高温</div>
              <div class="code-name">#icon-gaowen1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-ganhan1"></use>
              </svg>
              <div class="name">干旱</div>
              <div class="code-name">#icon-ganhan1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dafeng"></use>
              </svg>
              <div class="name">大风</div>
              <div class="code-name">#icon-dafeng</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shuangdong"></use>
              </svg>
              <div class="name">霜冻</div>
              <div class="code-name">#icon-shuangdong</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-baoxue"></use>
              </svg>
              <div class="name">暴雪</div>
              <div class="code-name">#icon-baoxue</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-bingbao"></use>
              </svg>
              <div class="name">冰雹</div>
              <div class="code-name">#icon-bingbao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jiebing"></use>
              </svg>
              <div class="name">结冰</div>
              <div class="code-name">#icon-jiebing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-nongwu"></use>
              </svg>
              <div class="name">浓雾</div>
              <div class="code-name">#icon-nongwu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shachen"></use>
              </svg>
              <div class="name">沙尘</div>
              <div class="code-name">#icon-shachen</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-baoyu"></use>
              </svg>
              <div class="name">暴雨</div>
              <div class="code-name">#icon-baoyu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-leibaodafeng"></use>
              </svg>
              <div class="name">雷暴大风</div>
              <div class="code-name">#icon-leibaodafeng</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dengji-copy"></use>
              </svg>
              <div class="name">供水风险等级划分</div>
              <div class="code-name">#icon-dengji-copy</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shui"></use>
              </svg>
              <div class="name">供水风险区划</div>
              <div class="code-name">#icon-shui</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jiankong3"></use>
              </svg>
              <div class="name">视频监控</div>
              <div class="code-name">#icon-jiankong3</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tingchechang"></use>
              </svg>
              <div class="name">停车场</div>
              <div class="code-name">#icon-tingchechang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zuoyeshijing"></use>
              </svg>
              <div class="name">作业实景</div>
              <div class="code-name">#icon-zuoyeshijing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-wenjian"></use>
              </svg>
              <div class="name">服务产品</div>
              <div class="code-name">#icon-wenjian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-print-full"></use>
              </svg>
              <div class="name">服务产品-产品制作</div>
              <div class="code-name">#icon-print-full</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-menu_tkgl"></use>
              </svg>
              <div class="name">服务产品-图库管理</div>
              <div class="code-name">#icon-menu_tkgl</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-weizhiwendang"></use>
              </svg>
              <div class="name">服务产品-地区管理</div>
              <div class="code-name">#icon-weizhiwendang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yishenpi"></use>
              </svg>
              <div class="name">服务产品-分发管理</div>
              <div class="code-name">#icon-yishenpi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-suanfayanshi_mianxing"></use>
              </svg>
              <div class="name">服务产品-算法管理</div>
              <div class="code-name">#icon-suanfayanshi_mianxing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-sucaiguanli"></use>
              </svg>
              <div class="name">服务产品-素材管理</div>
              <div class="code-name">#icon-sucaiguanli</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-painting4"></use>
              </svg>
              <div class="name">服务产品-绘图资料</div>
              <div class="code-name">#icon-a-painting4</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yingxiaoguanli-dingdanguanli"></use>
              </svg>
              <div class="name">服务产品-产品管理</div>
              <div class="code-name">#icon-yingxiaoguanli-dingdanguanli</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-moban"></use>
              </svg>
              <div class="name">服务产品-产品模版</div>
              <div class="code-name">#icon-moban</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-turangshuifen"></use>
              </svg>
              <div class="name">土壤水分整点数据</div>
              <div class="code-name">#icon-turangshuifen</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-turangshidu"></use>
              </svg>
              <div class="name">土壤水分空间分布</div>
              <div class="code-name">#icon-turangshidu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zhihuizhongxin"></use>
              </svg>
              <div class="name">应急指挥</div>
              <div class="code-name">#icon-zhihuizhongxin</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shuiku"></use>
              </svg>
              <div class="name">水库</div>
              <div class="code-name">#icon-shuiku</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-paotai"></use>
              </svg>
              <div class="name">炮台</div>
              <div class="code-name">#icon-paotai</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-liangku"></use>
              </svg>
              <div class="name">粮库</div>
              <div class="code-name">#icon-liangku</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-linchangfanghuodian"></use>
              </svg>
              <div class="name">林场防火点</div>
              <div class="code-name">#icon-linchangfanghuodian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yingjifuzeren"></use>
              </svg>
              <div class="name">应急负责人</div>
              <div class="code-name">#icon-yingjifuzeren</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yujingdalaba"></use>
              </svg>
              <div class="name">预警大喇叭</div>
              <div class="code-name">#icon-yujingdalaba</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gongkuangqiye"></use>
              </svg>
              <div class="name">工矿企业</div>
              <div class="code-name">#icon-gongkuangqiye</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jizhencunzhai"></use>
              </svg>
              <div class="name">集镇村寨</div>
              <div class="code-name">#icon-jizhencunzhai</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xuexiao"></use>
              </svg>
              <div class="name">学校</div>
              <div class="code-name">#icon-xuexiao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jiayouzhan"></use>
              </svg>
              <div class="name">加油站</div>
              <div class="code-name">#icon-jiayouzhan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-nishiliu"></use>
              </svg>
              <div class="name">泥石流</div>
              <div class="code-name">#icon-nishiliu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dimianchenjiang"></use>
              </svg>
              <div class="name">地面沉降</div>
              <div class="code-name">#icon-dimianchenjiang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-diliefeng"></use>
              </svg>
              <div class="name">地裂缝</div>
              <div class="code-name">#icon-diliefeng</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-hanchao"></use>
              </svg>
              <div class="name">寒潮</div>
              <div class="code-name">#icon-hanchao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-mianxingguoshu"></use>
              </svg>
              <div class="name">苹果园</div>
              <div class="code-name">#icon-mianxingguoshu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zao"></use>
              </svg>
              <div class="name">红枣园</div>
              <div class="code-name">#icon-zao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-mianxingyangshu"></use>
              </svg>
              <div class="name">农业园区</div>
              <div class="code-name">#icon-mianxingyangshu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dizhizaihaiyinhuandian"></use>
              </svg>
              <div class="name">地质灾害预警</div>
              <div class="code-name">#icon-dizhizaihaiyinhuandian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gantanhao-sanjiaokuang"></use>
              </svg>
              <div class="name">灾害性天气预警</div>
              <div class="code-name">#icon-gantanhao-sanjiaokuang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-alarm-full"></use>
              </svg>
              <div class="name">自动站阈值报警</div>
              <div class="code-name">#icon-alarm-full</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuwumiaoshu"></use>
              </svg>
              <div class="name">服务描述</div>
              <div class="code-name">#icon-fuwumiaoshu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jiaosequnti"></use>
              </svg>
              <div class="name">角色管理</div>
              <div class="code-name">#icon-jiaosequnti</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shujujiekou"></use>
              </svg>
              <div class="name">接口管理</div>
              <div class="code-name">#icon-shujujiekou</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-bangzhu"></use>
              </svg>
              <div class="name">系统帮助</div>
              <div class="code-name">#icon-bangzhu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-daima"></use>
              </svg>
              <div class="name">返回示例</div>
              <div class="code-name">#icon-daima</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-pingtaikaifang"></use>
              </svg>
              <div class="name">平台开放</div>
              <div class="code-name">#icon-pingtaikaifang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-miaoshu"></use>
              </svg>
              <div class="name">数据描述</div>
              <div class="code-name">#icon-miaoshu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-24gf-fileEmpty"></use>
              </svg>
              <div class="name">24gf-fileEmpty</div>
              <div class="code-name">#icon-24gf-fileEmpty</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
              </svg>
              <div class="name">搜索</div>
              <div class="code-name">#icon-sousuo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-project_space"></use>
              </svg>
              <div class="name">用户空间</div>
              <div class="code-name">#icon-project_space</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuwu1"></use>
              </svg>
              <div class="name">服务与支持</div>
              <div class="code-name">#icon-fuwu1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shuzhuangtu"></use>
              </svg>
              <div class="name">资源共享</div>
              <div class="code-name">#icon-shuzhuangtu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shouye"></use>
              </svg>
              <div class="name">数据中台-首页</div>
              <div class="code-name">#icon-shouye</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-24gf-folderOpen"></use>
              </svg>
              <div class="name">24gf-folderOpen</div>
              <div class="code-name">#icon-24gf-folderOpen</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jiekousheji"></use>
              </svg>
              <div class="name">接口设计</div>
              <div class="code-name">#icon-jiekousheji</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-navicon-dphf"></use>
              </svg>
              <div class="name">后台-大屏</div>
              <div class="code-name">#icon-navicon-dphf</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-daqiao"></use>
              </svg>
              <div class="name">大桥</div>
              <div class="code-name">#icon-daqiao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiapo"></use>
              </svg>
              <div class="name">下坡</div>
              <div class="code-name">#icon-xiapo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-suidao"></use>
              </svg>
              <div class="name">隧道</div>
              <div class="code-name">#icon-suidao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shiguyifadian"></use>
              </svg>
              <div class="name">事故易发点</div>
              <div class="code-name">#icon-shiguyifadian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jizhuanwan"></use>
              </svg>
              <div class="name">急转弯</div>
              <div class="code-name">#icon-jizhuanwan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-hengfengqu"></use>
              </svg>
              <div class="name">横风区</div>
              <div class="code-name">#icon-hengfengqu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shangpo"></use>
              </svg>
              <div class="name">上坡</div>
              <div class="code-name">#icon-shangpo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shijian2"></use>
              </svg>
              <div class="name">大气-时间选择</div>
              <div class="code-name">#icon-shijian2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shujuchaxun"></use>
              </svg>
              <div class="name">气象服务</div>
              <div class="code-name">#icon-shujuchaxun</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shujujiance"></use>
              </svg>
              <div class="name">数据监测</div>
              <div class="code-name">#icon-shujujiance</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tanpaiguanli"></use>
              </svg>
              <div class="name">农业专题</div>
              <div class="code-name">#icon-tanpaiguanli</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-ziyuan609"></use>
              </svg>
              <div class="name">农业</div>
              <div class="code-name">#icon-a-ziyuan609</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-2"></use>
              </svg>
              <div class="name">2</div>
              <div class="code-name">#icon-a-2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-0"></use>
              </svg>
              <div class="name">0</div>
              <div class="code-name">#icon-a-0</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-41"></use>
              </svg>
              <div class="name">4</div>
              <div class="code-name">#icon-a-41</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-1"></use>
              </svg>
              <div class="name">1</div>
              <div class="code-name">#icon-a-1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-31"></use>
              </svg>
              <div class="name">3</div>
              <div class="code-name">#icon-a-31</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-kongqiqingxin"></use>
              </svg>
              <div class="name">站点大气质量</div>
              <div class="code-name">#icon-kongqiqingxin</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-icondaqi"></use>
              </svg>
              <div class="name">大气环境</div>
              <div class="code-name">#icon-a-icondaqi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dianji"></use>
              </svg>
              <div class="name">大气环境-点击</div>
              <div class="code-name">#icon-dianji</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yiyuan"></use>
              </svg>
              <div class="name">医院</div>
              <div class="code-name">#icon-yiyuan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-Group427319262"></use>
              </svg>
              <div class="name">商超</div>
              <div class="code-name">#icon-a-Group427319262</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jiudian"></use>
              </svg>
              <div class="name">酒店</div>
              <div class="code-name">#icon-jiudian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuwuqu"></use>
              </svg>
              <div class="name">服务区</div>
              <div class="code-name">#icon-fuwuqu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-Group50871"></use>
              </svg>
              <div class="name">卫生间</div>
              <div class="code-name">#icon-a-Group50871</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-leidian"></use>
              </svg>
              <div class="name">雷电</div>
              <div class="code-name">#icon-leidian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gaowen"></use>
              </svg>
              <div class="name">高温</div>
              <div class="code-name">#icon-gaowen</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jiangshui1"></use>
              </svg>
              <div class="name">降水</div>
              <div class="code-name">#icon-jiangshui1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fengsu"></use>
              </svg>
              <div class="name">风速</div>
              <div class="code-name">#icon-fengsu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jianceyujing_1"></use>
              </svg>
              <div class="name">企业预警</div>
              <div class="code-name">#icon-jianceyujing_1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tongji2"></use>
              </svg>
              <div class="name">企业影响统计</div>
              <div class="code-name">#icon-tongji2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jurassic_wait"></use>
              </svg>
              <div class="name">企业历史</div>
              <div class="code-name">#icon-jurassic_wait</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-qiye2"></use>
              </svg>
              <div class="name">能源化工气象影响</div>
              <div class="code-name">#icon-qiye2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tushu"></use>
              </svg>
              <div class="name">科普信息</div>
              <div class="code-name">#icon-tushu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-weiju"></use>
              </svg>
              <div class="name">花粉健康影响</div>
              <div class="code-name">#icon-weiju</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-daolujiebing"></use>
              </svg>
              <div class="name">道路结冰</div>
              <div class="code-name">#icon-daolujiebing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-Group1923"></use>
              </svg>
              <div class="name">铁路</div>
              <div class="code-name">#icon-a-Group1923</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-ganhan"></use>
              </svg>
              <div class="name">干旱</div>
              <div class="code-name">#icon-ganhan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-diwenbaojing"></use>
              </svg>
              <div class="name">低温报警</div>
              <div class="code-name">#icon-diwenbaojing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gaowenbaojing"></use>
              </svg>
              <div class="name">高温报警</div>
              <div class="code-name">#icon-gaowenbaojing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-daolu-mian"></use>
              </svg>
              <div class="name">道路-面</div>
              <div class="code-name">#icon-daolu-mian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dafeng1"></use>
              </svg>
              <div class="name">大风</div>
              <div class="code-name">#icon-dafeng1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yanjing"></use>
              </svg>
              <div class="name">眼睛</div>
              <div class="code-name">#icon-yanjing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shijian1"></use>
              </svg>
              <div class="name">217时间</div>
              <div class="code-name">#icon-shijian1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zhuyi"></use>
              </svg>
              <div class="name">注意</div>
              <div class="code-name">#icon-zhuyi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dingwei"></use>
              </svg>
              <div class="name">定位</div>
              <div class="code-name">#icon-dingwei</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-earth"></use>
              </svg>
              <div class="name">earth</div>
              <div class="code-name">#icon-earth</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-3"></use>
              </svg>
              <div class="name">3</div>
              <div class="code-name">#icon-a-3</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-5"></use>
              </svg>
              <div class="name">5</div>
              <div class="code-name">#icon-a-5</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-4"></use>
              </svg>
              <div class="name">4</div>
              <div class="code-name">#icon-a-4</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-21"></use>
              </svg>
              <div class="name">2</div>
              <div class="code-name">#icon-a-21</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-huanjingjiance"></use>
              </svg>
              <div class="name">综合监测</div>
              <div class="code-name">#icon-huanjingjiance</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tongji1"></use>
              </svg>
              <div class="name">景点统计</div>
              <div class="code-name">#icon-tongji1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jingqu"></use>
              </svg>
              <div class="name">景区天气</div>
              <div class="code-name">#icon-jingqu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-Group5088"></use>
              </svg>
              <div class="name">景区</div>
              <div class="code-name">#icon-a-Group5088</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shumu"></use>
              </svg>
              <div class="name">植被覆盖率</div>
              <div class="code-name">#icon-shumu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jishireduchaxun"></use>
              </svg>
              <div class="name">历史火点</div>
              <div class="code-name">#icon-jishireduchaxun</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fanghuodianguanli"></use>
              </svg>
              <div class="name">林区火点监测</div>
              <div class="code-name">#icon-fanghuodianguanli</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-lin"></use>
              </svg>
              <div class="name">林</div>
              <div class="code-name">#icon-lin</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fengxiang"></use>
              </svg>
              <div class="name">风向</div>
              <div class="code-name">#icon-fengxiang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-IOTtubiao_huabanfuben"></use>
              </svg>
              <div class="name">湿度</div>
              <div class="code-name">#icon-IOTtubiao_huabanfuben</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-wendu"></use>
              </svg>
              <div class="name">温度 (1)</div>
              <div class="code-name">#icon-wendu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jiangshui"></use>
              </svg>
              <div class="name">降水</div>
              <div class="code-name">#icon-jiangshui</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-remen2"></use>
              </svg>
              <div class="name">火点实时监测/地图火点</div>
              <div class="code-name">#icon-remen2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dian"></use>
              </svg>
              <div class="name">点</div>
              <div class="code-name">#icon-dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tongji"></use>
              </svg>
              <div class="name">历史预警统计</div>
              <div class="code-name">#icon-tongji</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-c_safety_analysis_early_warning"></use>
              </svg>
              <div class="name">预警结果检验评估</div>
              <div class="code-name">#icon-c_safety_analysis_early_warning</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yujing3"></use>
              </svg>
              <div class="name">预警信号二级标题</div>
              <div class="code-name">#icon-yujing3</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yujing1"></use>
              </svg>
              <div class="name">预警列表</div>
              <div class="code-name">#icon-yujing1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yujing2"></use>
              </svg>
              <div class="name">预警信号右上列表</div>
              <div class="code-name">#icon-yujing2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-duibifenxi"></use>
              </svg>
              <div class="name">模式对比</div>
              <div class="code-name">#icon-duibifenxi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shijian"></use>
              </svg>
              <div class="name">预报时间</div>
              <div class="code-name">#icon-shijian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-liangliangduibi"></use>
              </svg>
              <div class="name">数值预报</div>
              <div class="code-name">#icon-liangliangduibi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-wangge"></use>
              </svg>
              <div class="name">网格预报</div>
              <div class="code-name">#icon-wangge</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xuekeyoushipinggu"></use>
              </svg>
              <div class="name">模式结果检验评估</div>
              <div class="code-name">#icon-xuekeyoushipinggu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-qiapianmoshi_kuai"></use>
              </svg>
              <div class="name">模式选择</div>
              <div class="code-name">#icon-qiapianmoshi_kuai</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-biaoge"></use>
              </svg>
              <div class="name">站点统计分析</div>
              <div class="code-name">#icon-biaoge</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-wanggexian"></use>
              </svg>
              <div class="name">格点实况监测</div>
              <div class="code-name">#icon-wanggexian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jurassic_user"></use>
              </svg>
              <div class="name">用户-角色-用户名-单人_jurassic</div>
              <div class="code-name">#icon-jurassic_user</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-suoding"></use>
              </svg>
              <div class="name">242锁定</div>
              <div class="code-name">#icon-suoding</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-daqi1"></use>
              </svg>
              <div class="name">大气1</div>
              <div class="code-name">#icon-daqi1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-daqi"></use>
              </svg>
              <div class="name">大气</div>
              <div class="code-name">#icon-daqi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zhengshan"></use>
              </svg>
              <div class="name">正闪</div>
              <div class="code-name">#icon-zhengshan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fushan"></use>
              </svg>
              <div class="name">负闪</div>
              <div class="code-name">#icon-fushan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-daqidianchangyi"></use>
              </svg>
              <div class="name">大气电场仪</div>
              <div class="code-name">#icon-daqidianchangyi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-weibofusheji"></use>
              </svg>
              <div class="name">微波辐射计</div>
              <div class="code-name">#icon-weibofusheji</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fengkuoxianleida"></use>
              </svg>
              <div class="name">风廓线雷达</div>
              <div class="code-name">#icon-fengkuoxianleida</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-Group427319210"></use>
              </svg>
              <div class="name">运输</div>
              <div class="code-name">#icon-a-Group427319210</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-bengta"></use>
              </svg>
              <div class="name">崩塌</div>
              <div class="code-name">#icon-bengta</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-Group427319209"></use>
              </svg>
              <div class="name">新能源</div>
              <div class="code-name">#icon-a-Group427319209</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-Group5087"></use>
              </svg>
              <div class="name">化工</div>
              <div class="code-name">#icon-a-Group5087</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dimiantaxian"></use>
              </svg>
              <div class="name">地面塌陷</div>
              <div class="code-name">#icon-dimiantaxian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-Group427319208"></use>
              </svg>
              <div class="name">煤炭</div>
              <div class="code-name">#icon-a-Group427319208</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-Group427319207"></use>
              </svg>
              <div class="name">热电</div>
              <div class="code-name">#icon-a-Group427319207</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-huapo"></use>
              </svg>
              <div class="name">滑坡</div>
              <div class="code-name">#icon-huapo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-Frame3"></use>
              </svg>
              <div class="name">内涝</div>
              <div class="code-name">#icon-Frame3</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-Vector"></use>
              </svg>
              <div class="name">雷达</div>
              <div class="code-name">#icon-Vector</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xialaxiao"></use>
              </svg>
              <div class="name">下拉（小）_32</div>
              <div class="code-name">#icon-xialaxiao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fanhui"></use>
              </svg>
              <div class="name">返回_32</div>
              <div class="code-name">#icon-fanhui</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gengduo"></use>
              </svg>
              <div class="name">更多_32</div>
              <div class="code-name">#icon-gengduo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-bofangqi-bofang"></use>
              </svg>
              <div class="name">播放器-播放_44</div>
              <div class="code-name">#icon-bofangqi-bofang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-bofangqi-zanting"></use>
              </svg>
              <div class="name">播放器-暂停_44</div>
              <div class="code-name">#icon-bofangqi-zanting</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-rili"></use>
              </svg>
              <div class="name">234日历</div>
              <div class="code-name">#icon-rili</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-Frame"></use>
              </svg>
              <div class="name">交通</div>
              <div class="code-name">#icon-Frame</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-Frame1"></use>
              </svg>
              <div class="name">旅游</div>
              <div class="code-name">#icon-Frame1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-Frame2"></use>
              </svg>
              <div class="name">内涝</div>
              <div class="code-name">#icon-Frame2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jiankang"></use>
              </svg>
              <div class="name">健康</div>
              <div class="code-name">#icon-jiankang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuwu"></use>
              </svg>
              <div class="name">服务</div>
              <div class="code-name">#icon-fuwu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-nenghua"></use>
              </svg>
              <div class="name">能化</div>
              <div class="code-name">#icon-nenghua</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-list"></use>
              </svg>
              <div class="name">网格</div>
              <div class="code-name">#icon-list</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-qita"></use>
              </svg>
              <div class="name">探空资料</div>
              <div class="code-name">#icon-qita</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tianqi"></use>
              </svg>
              <div class="name">站点实况监测</div>
              <div class="code-name">#icon-tianqi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tianqileida"></use>
              </svg>
              <div class="name">天气雷达</div>
              <div class="code-name">#icon-tianqileida</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jurassic_table"></use>
              </svg>
              <div class="name">表-表格_jurassic</div>
              <div class="code-name">#icon-jurassic_table</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yonghu"></use>
              </svg>
              <div class="name">224用户</div>
              <div class="code-name">#icon-yonghu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-linye"></use>
              </svg>
              <div class="name">林业</div>
              <div class="code-name">#icon-linye</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tuceng"></use>
              </svg>
              <div class="name">图层</div>
              <div class="code-name">#icon-tuceng</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yujing"></use>
              </svg>
              <div class="name">预警</div>
              <div class="code-name">#icon-yujing</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-7"></use>
              </svg>
              <div class="name">plane</div>
              <div class="code-name">#icon-7</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-diqiu"></use>
              </svg>
              <div class="name">地球</div>
              <div class="code-name">#icon-diqiu</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="symbol-">Symbol 引用</h2>
            <hr />

            <p>
              这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
                href=""
                >文章</a
              >
              这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
            </p>
            <ul>
              <li>支持多色图标了，不再受单色限制。</li>
              <li>
                通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
                <code>color</code> 来调整样式。
              </li>
              <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
              <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
            </ul>
            <p>使用步骤如下：</p>
            <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
            <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
            <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
            <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
            <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
            <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function () {
        $('.tab-container .content:first').show()

        $('#tabs li').click(function (e) {
          var tabContent = $('.tab-container .content')
          var index = $(this).index()

          if ($(this).hasClass('active')) {
            return
          } else {
            $('#tabs li').removeClass('active')
            $(this).addClass('active')

            tabContent.hide().eq(index).fadeIn()
          }
        })
      })
    </script>
  </body>
</html>
